<template>
  <div class="app-container">
    <div class="header">
      <!-- <div class="back-icon" @click="goBack">←</div> -->
      <div class="title">防伪查询</div>
    </div>
    <div class="card-container">
      <canvas class="card-img" id="dynamicCanvas" ref="canvas"></canvas>

      <!-- <img class="card-img" :src="fangweiimg" alt="防伪卡"> -->
    </div>
    <div class="reminder">温馨提醒：如需转让球杆联系官方更改拥有者信息</div>
    <div class="info-container">
      <div class="info-block">
        <div class="info-title owner-info-title">拥有者信息</div>
        <div class="info-item indented-item">
          <span class="label">姓名：</span>
          <span class="value">{{ownerName}}</span>
        </div>
        <div class="info-item indented-item">
          <span class="label">地区：</span>
          <span class="value">{{ownerAddress}}</span>
        </div>
        <div class="info-item indented-item">
          <span class="label">拥有时间：</span>
          <span class="value">{{ parseTime(ownerDate, '{y}年{m}月{d}日') }}</span>
        </div>
      </div>
      <div class="info-block">
        <div class="info-title owner-info-title">生产信息</div>
        <div class="info-item">
          <span class="label">生产批次：</span>
          <span class="value">{{produceBatch}}</span>
        </div>
        <div class="info-item">
          <span class="label">制作日期：</span>
          <span class="value">{{ parseTime(makeDate, '{y}年{m}月{d}日') }}</span>
        </div>
      </div>
      <div class="info-block">
        <div class="info-title owner-info-title">
          <span>产品信息</span>
          <span class="view-pic-btn" @click="viewProductPic">查看产品图片</span>
        </div>
        <div class="info-item">
          <span class="label">防伪编号：</span>
          <span class="value">{{antiCounterfeitingNumber}}</span>
        </div>
        <div class="info-item">
          <span class="label">型号等级：</span>
          <span class="value">{{cueLevel}}</span>
        </div>
        <div class="info-item-inline"> <!-- 新增的 class 用于同一行显示 -->
          <div class=" half-width">
            <span class="label">杆身材质：</span>
            <span class="value">{{cueMaterial}}</span>
          </div>
          <div class=" half-width">
            <span class="label">插花材质：</span>
            <span class="value">{{cueFlowerMaterial}}</span>
          </div>
        </div>
        <div class="info-item-inline"> <!-- 新增的 class 用于同一行显示 -->
          <div class=" half-width">
            <span class="label">杆头直径：</span>
            <span class="value">{{cueHead}}</span>
          </div>
          <div class=" half-width">
            <span class="label">球杆重量：</span>
            <span class="value">{{cueWeight}}</span>
          </div>
        </div>
        <div class="info-item-inline"> <!-- 新增的 class 用于同一行显示 -->
          <div class=" half-width">
            <span class="label">球杆长度：</span>
            <span class="value">{{cueLength}}</span>
          </div>
          <div class=" half-width">
            <span class="label">球杆握把：</span>
            <span class="value">{{cueGrip}}</span>
          </div>
        </div>
        <div class="info-item">
          <span class="label">球杆重心：</span>
          <span class="value">{{cueBarycenter}}</span>
        </div>
      </div>
    </div>
    <!-- 图片弹窗 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
      class="h5-popup">
      <div class="image-container">
        <img v-for="(pic, index) in productPics" :key="index" :src="pic" alt="产品图片" style="width: 100%; height: auto; display: block; margin-bottom: 10px;">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getInfoByAntiCounterfeitingNumber } from "@/api/cue/cueInfo";

export default {
  name: 'App',

  data() {
    return {
      productPicUrl: 'https://your-product-pic-url-here.jpg',
      fangweiimg: 'https://zero-one01.oss-cn-shenzhen.aliyuncs.com/2025/04/204e6b0e30568b415ea72f7e75381ec005微信图片_20250420030410.png',
      textPositions: {
        cueHead: { x: 700, y: 93, fontSize: 100 },
        cueWeight: { x: 700, y: 140, fontSize: 25 },
        cueLength: { x: 700, y: 187, fontSize: 25 },
        cueGrip: { x: 700, y: 234, fontSize: 25 },
        cueBarycenter: { x: 700, y: 281, fontSize: 25 },
        antiCounterfeitingNumber: { x: 500, y: 345, fontSize: 25 },
        produceBatch: { x: 550, y: 413, fontSize: 25 },
        //number: { x: 187, y: 309, fontSize: 25 },
      },
      orderId: null,
      orderDate: null,
      ownerName: null,
      ownerPhone: null,
      ownerAddress: null,
      ownerDate: null,
      produceBatch: null,
      makeDate: null,
      antiCounterfeitingNumber: null,
      nameplateNumber: null,
      cueLevel: null,
      cueMaterial: null,
      cueFlowerMaterial: null,
      cueHead: null,
      cueWeight: null,
      cueLength: null,
      cueGrip: null,
      cueBarycenter: null,
      dialogVisible: false,
      productPics: [
        'https://example.com/pic1.jpg',
        'https://example.com/pic2.jpg',
        'https://example.com/pic3.jpg'
      ]
    }
  },
  created() {
    this.getUrlQuery();
  },
  mounted() {
    // 移除原有的 mounted 中的绘制逻辑，改为在接口回调中处理
  },
  methods: {
    async drawDynamicInfo() {
      const canvas = this.$refs.canvas;
      if (!canvas) {
        console.warn('canvas 元素未找到');
        return;
      }

      const ctx = canvas.getContext('2d');
      const img = new Image();
      img.src = this.fangweiimg;

      img.onload = () => {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);

        // 设置字体样式
        ctx.font = 'bold 25px AlimamaShuHeiTi-Bold';
        ctx.fillStyle = '#000';

        // 写入动态文本（从接口数据获取值）
        ctx.fillText(this.cueHead, this.textPositions.cueHead.x, this.textPositions.cueHead.y);
        ctx.fillText(this.cueWeight, this.textPositions.cueWeight.x, this.textPositions.cueWeight.y);
        ctx.fillText(this.cueLength, this.textPositions.cueLength.x, this.textPositions.cueLength.y);
        ctx.fillText(this.cueGrip, this.textPositions.cueGrip.x, this.textPositions.cueGrip.y);
        ctx.fillText(this.cueBarycenter, this.textPositions.cueBarycenter.x, this.textPositions.cueBarycenter.y);
        ctx.fillText(this.antiCounterfeitingNumber, this.textPositions.antiCounterfeitingNumber.x, this.textPositions.antiCounterfeitingNumber.y);
        ctx.fillText(this.produceBatch, this.textPositions.produceBatch.x, this.textPositions.produceBatch.y);

        // 设置字体样式（需与模板匹配）
        ctx.font = 'bold 40px AlimamaShuHeiTi-Bold';
        ctx.fillStyle = '#000'; // 文本颜色，根据模板背景调整
        //ctx.fillText(this.nameplateNumber, this.textPositions.number.x, this.textPositions.number.y);
      };
    },
  
    goBack() {
      console.log('返回上一页')
    },
    viewProductPic() {
      this.$router.push({path:'/cueAntiCounterfeitingImage',query: {antiCounterfeitingNumber:this.antiCounterfeitingNumber}})
    },
    handleClose(done) {
      this.dialogVisible = false;
      done();
    },
    //获取当前链接的参数
    getUrlQuery() {
      let url = window.location.href
      let reg = /[?&]([^?&#]+)=([^?&#]+)/g;
      let param = {};
      let ret = reg.exec(url);
      while (ret) { // 当ret为null时表示已经匹配到最后了，直接跳出
        param[ret[1]] = ret[2];
        ret = reg.exec(url);
      }
      this.antiCounterfeitingNumber = param.antiCounterfeitingNumber;
      getInfoByAntiCounterfeitingNumber(this.antiCounterfeitingNumber).then(response => {
        this.ownerName = response.data.ownerName;
        this.ownerAddress = response.data.ownerAddress;
        this.ownerDate = response.data.ownerDate;
        this.produceBatch = response.data.produceBatch;
        this.makeDate = response.data.makeDate;
        this.antiCounterfeitingNumber = response.data.antiCounterfeitingNumber;
        this.cueLevel = response.data.cueLevel;
        this.cueMaterial = response.data.cueMaterial;
        this.cueFlowerMaterial = response.data.cueFlowerMaterial;
        this.cueHead = response.data.cueHead;
        this.cueWeight = response.data.cueWeight;
        this.cueLength = response.data.cueLength;
        this.cueGrip = response.data.cueGrip;
        this.cueBarycenter = response.data.cueBarycenter;
        this.nameplateNumber = response.data.nameplateNumber;

        // 在接口数据返回后进行 canvas 渲染
        this.$nextTick(() => {
          this.drawDynamicInfo();
        });
      }).catch(error => {
        console.error('获取防伪信息失败:', error);
      });
    },
  }
}
</script>

<style scoped>
/* 引入阿里巴巴数黑体粗体字体文件 */
@font-face {
  font-family: 'AlimamaShuHeiTi-Bold';
  src: url('~@/assets/fonts/AlimamaShuHeiTi-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

/* 通用样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'AlimamaShuHeiTi-Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
}

html {
  font-size: 16px;
}

body {
  background-color: #000;
  color: #fff;
  font-family: 'AlimamaShuHeiTi-Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.app-container {
  background-color: #000;
  color: #fff;
  padding: 1rem;
  max-width: 640px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.25rem;
}

.back-icon {
  position: absolute;
  left: 1rem;
  cursor: pointer;
  font-size: 1.25rem;
}

.title {
  font-size: 1.25rem;
}

.card-container {
  border-radius: 0.5rem;
  padding: 0;
  /* 去掉内边距 */
  margin: 0;
  /* 设置外边距为 0 */
  text-align: center;
}

.card-img {
  width: 100%;
  height: auto;
  /* 保持图片宽高比 */
  display: block;
  /* 去除图片下方的空白间隙 */
  border-radius: 0.5rem;
  /* 让图片也有圆角 */
}

.reminder {
  color: #f00;
  font-size: 0.8rem;
  margin-bottom: 1rem;
  text-align: center;
}

.info-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.info-block {
  background-color: #333;
  border-radius: 0.5rem;
  padding: 1rem;
}

.info-title {
  font-size: 1.125rem;
  margin-bottom: 0.625rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.owner-info-title {
  font-size: 1.375rem;
  /* 增大“拥有者信息”标题字体大小 */
}

.info-item {
  display: flex;
  align-items: baseline;
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  /* 使字段信息往后缩进 */
  border-bottom: 1px solid #666;
  /* 下方显示灰色线 */
  padding-bottom: 5px;
  /* 增加底部内边距，让下划线往下一点 */
}

.label {
  min-width: 80px;
  text-align: left;
  font-size: 0.9rem;
}

.value {
  flex: 1;
  text-align: left;
  font-size: 0.9rem;
}

.info-item-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.info-item:last-child {
  border-bottom: none;
  /* 移除每个 info-block 中最后一个 info-item 的下划线 */
}

.half-width {
  display: flex;
  align-items: baseline;
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  /* 使字段信息往后缩进 */
  border-bottom: 1px solid #666;
  /* 下方显示灰色线 */
  padding-bottom: 5px;
  /* 增加底部内边距，让下划线往下一点 */
  width: 50%;
  /* 设置宽度为 50% */
}

.view-pic-btn {
  color: #ccc;
  cursor: pointer;
  font-size: 0.9rem;
}

/* 弹窗样式 */
.h5-popup {
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background-color: #111;
}

.image-container {
  display: flex;
  flex-direction: column;
}
</style>
    